<template>
  <div class="rightMapToolBtn">
    <a-tooltip placement="left" title="图层选择" arrow-point-at-center>
      <div class="mapBtn" @click="clickTuceng">
        <a-button icon="copy" class="toolBarBtn" disabled circle size="large"/>
      </div>
    </a-tooltip>

    <a-tooltip placement="left" title="放大地图层级" arrow-point-at-center>
      <div class="mapBtn" @click="clickZoomIn">
        <a-button icon="plus" class="toolBarBtn" circle size="large"/>
      </div>
    </a-tooltip>

    <a-tooltip placement="left" title="缩小地图层级" arrow-point-at-center>
      <div class="mapBtn" @click="clickZoomOut">
        <a-button icon="minus" class="toolBarBtn" circle size="large"/>
      </div>
    </a-tooltip>

    <a-tooltip placement="left" title="清空地图" arrow-point-at-center>
      <div class="mapBtn" @click="clickClearMap">
        <a-button icon="delete" class="toolBarBtn" circle size="large"/>
      </div>
    </a-tooltip>

    <a-tooltip placement="left" title="测量工具" arrow-point-at-center>
      <div class="mapBtn">
        <a-popover title="地图测量" placement="left" trigger="click">
          <template slot="content">
            <div>
              <a-button @click="clickCeLiang(1)">测量距离</a-button>
              <a-button @click="clickCeLiang(2)">测量面积</a-button>
              <a-button @click="clickCeLiang">清除测量</a-button>
            </div>
          </template>
          <a-button icon="radius-setting" class="toolBarBtn chi" circle size="large"/>
        </a-popover>
      </div>
    </a-tooltip>

    <a-tooltip placement="left" title="标绘工具" arrow-point-at-center>
      <div class="mapBtn">
        <a-popover title="标绘工具" placement="left" trigger="click">
          <template slot="content">
            <div class="panel">
              <div class="panel-body">
                <div class="tip-item">
                  <a-button @click="clickDraw(1)">点</a-button>
                  <a-button @click="clickDraw(2)">线</a-button>
                  <a-button @click="clickDraw(3)">面</a-button>
                  <a-button @click="clickDraw(4)">圆</a-button>
                  <a-button @click="clickDraw(5)">矩形</a-button>
                  <a-button @click="clickDraw">清除</a-button>
                </div>
              </div>
            </div>
          </template>
          <a-button icon="highlight" class="toolBarBtn" circle size="large"/>
        </a-popover>
      </div>
    </a-tooltip>

    <a-tooltip
        title="切换底图"
        placement="left"
        arrow-point-at-center
    >
      <div class="mapBtn">
        <a-popover title="切换底图" placement="left" trigger="click">
          <template slot="content">
            <div class="panel">
              <div class="panel-body">
                <div class="tip-item">
                  <div
                      class="cesium-baseLayerPicker-item"
                      title="矢量地图"
                      @click="clickChangeBaseMap(1)"
                  >
                    <img
                        class="cesium-baseLayerPicker-itemIcon"
                        draggable="false"
                        src="../icon/basemap/map_img.png"
                        width="80px"
                        :class="{'cesium-baseLayerPicker-itemIcon-select':currentMap == 1}"
                    />
                    <div
                        class="cesium-baseLayerPicker-itemLabel"
                        data-bind="text: name"
                        :class="{'cesium-baseLayerPicker-itemLabel-select':currentMap == 1}"
                    >
                      矢量地图
                    </div>
                  </div>
                  <div
                      class="cesium-baseLayerPicker-item"
                      title="影像地图"
                      @click="clickChangeBaseMap(2)"
                  >
                    <img
                        class="cesium-baseLayerPicker-itemIcon"
                        draggable="false"
                        src="../icon/basemap/map_yx.png"
                        width="80px"
                        :class="{'cesium-baseLayerPicker-itemIcon-select':currentMap == 2}"
                    />
                    <div
                        class="cesium-baseLayerPicker-itemLabel"
                        data-bind="text: name"
                        :class="{'cesium-baseLayerPicker-itemLabel-select':currentMap == 2}"
                    >
                      影像地图
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <a-button icon="picture" class="toolBarBtn" circle size="large"/>
        </a-popover>
      </div>
    </a-tooltip>

  </div>
</template>

<script>
import MapUtils from "../js/mapUtil/MapUtils";
import MapMeasure from "../js/mapUtil/MapMeasure";
import Bus from "@/utils/bus.js"

export default {
  name: "MapToolBar",
  data() {
    return {
      baseMaps: [],
      currentMap: 2,
      measure: null,
    }
  },
  methods: {
    clickChangeBaseMap(pid) {
      this.currentMap = pid
      MapUtils.changeBaseMap(pid)
    },
    clickTuceng() {
      console.log('图层选择')
    },

    clickZoomIn() {
      if (window.map) {
        window.map.getView().setZoom(window.map.getView().getZoom() + 1)
      }
    },

    clickZoomOut() {
      if (window.map) {
        window.map.getView().setZoom(window.map.getView().getZoom() - 1)
      }
    },

    clickClearMap() {
      MapUtils.removeAllLayer()
      Bus.$emit('clearMap')
    },

    clickCeLiang(val) {
      this.initMapMeasure()
      switch (val) {
        case 1:
          //测距离
          this.measure.startMeasure('LineString');
          break
        case 2:
          //测面积
          this.measure.startMeasure('Polygon');
          break
        default:
          //清除测量
          this.measure.clearMeasure();
          break
      }
    },

    clickDraw(val) {
      this.initMapMeasure()
      switch (val) {
        case 1:
          //点
          this.measure.startDraw('Point')
          break
        case 2:
          //线
          this.measure.startDraw('LineString')
          break
        case 3:
          //面
          this.measure.startDraw('Polygon')
          break
        case 4:
          //圆形
          this.measure.startDraw('Circle')
          break
        case 5:
          //矩形
          this.measure.startDraw('Rectangle')
          break
        default:
          //清除
          this.measure.clearMeasure();
          break
      }
    },

    initMapMeasure() {
      if (!this.measure) {
        this.measure = new MapMeasure()
      }
    },

  },
  mounted() {
  },
  beforeDestroy() {
    if (this.measure) {
      this.measure.destory()
    }
  },

}

</script>

<style lang="less" scoped>
.rightMapToolBtn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  // width: 50px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 5px;

  .mapBtn {
    color: #007E72FF;
    display: inline-block;
    width: 43px;
    height: 43px;
    text-align: center;
    line-height: 40px;
    background: url("../icon/mapTool/mapBtnBg.png") no-repeat;
    background-size: 100% 100%;
    border-radius: 50%;
    font-size: 20px;
    margin-bottom: 8px;
    cursor: pointer;

    &:hover,
    &.is-active {
      background-size: 100% 100%;
      color: #FF7D34FF;
    }

    .icon_img {
      height: 20px;
      width: 20px;
      display: block;
      text-align: center;
      margin: 0 auto;
      margin-top: 10px;
    }

    .icon_zhibei {
      background: url("../icon/mapTool/zhibei.png") no-repeat;
      background-size: 100% 100%;

      &:hover {
        background: url("../icon/mapTool/zhibei_hover.png") no-repeat;
        background-size: 100% 100%;
      }
    }

    .icon_celiang {
      background: url("../icon/mapTool/chi.png") no-repeat;
      background-size: 100% 100%;

      &:hover {
        background: url("../icon/mapTool/chi_hover.png") no-repeat;
        background-size: 100% 100%;
      }
    }

    .icon_biaohui {
      background: url("../icon/mapTool/biaohui.png") no-repeat;
      background-size: 100% 100%;

      &:hover {
        background: url("../icon/mapTool/biaohui_hover.png") no-repeat;
        background-size: 100% 100%;
      }
    }

    .toolBarBtn {
      background: none;
      border: none;
      color: #1c84c6;
      padding: 0;
      margin: auto;
      font-size: 18px;

      &:hover,
      &.is-active {
        background: none;
        border: none;
        color: #FF7D34FF;
      }
    }

  }


}
</style>
<style lang="less">
.map-popover {
  width: auto !important;
  min-width: 200px !important;
  padding: 20px !important;
  border: none !important;
  // background: rgba(27, 35, 58, 0.7) !important;
  background: url("../icon/mapTool/hm_sjzt_popover_bg.png") no-repeat !important;
  background-size: 100% 100% !important;
  height: auto;

  .el-popover__title {
    color: #1d1950;
    font-family: BigruixianBlackGBV10;
  }

  .el-popper.is-light .el-popper__arrow::before {
    border: 1px solid #e4e7ed;
    background: #FF9315FF;
    right: 0;
  }
}

.cesium-baseLayerPicker-item {
  display: inline-block;
  vertical-align: top;
  margin: 2px 10px;
  width: 64px;
  text-align: center;
  cursor: pointer
}

.cesium-baseLayerPicker-itemLabel {
  display: block;
  font-family: sans-serif;
  font-size: 10pt;
  text-align: center;
  vertical-align: middle;
  color: #0e383e;
  font-family: BigruixianBlackGBV10;
  cursor: pointer;
  word-wrap: break-word;
}

.cesium-baseLayerPicker-itemLabel-select {
  font-weight: 600;
}

.cesium-baseLayerPicker-item:hover .cesium-baseLayerPicker-itemLabel,
.cesium-baseLayerPicker-item:focus .cesium-baseLayerPicker-itemLabel {
  text-decoration: underline
}

.cesium-baseLayerPicker-itemIcon {
  display: inline-block;
  position: relative;
  width: inherit;
  height: auto;
  background-size: 100% 100%;
  border: solid 1px #444;
  border-radius: 9px;
  color: #edffff;
  margin: 0;
  padding: 0;
  cursor: pointer;
  box-sizing: border-box
}

.cesium-baseLayerPicker-itemIcon-select {
  border: 5px solid #20b27f;
}


.cesium-baseLayerPicker-item:hover .cesium-baseLayerPicker-itemIcon {
  border-color: #fff;
  box-shadow: 0 0 8px #fff, 0 0 8px #fff
}
</style>
